<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<nav-bar :backIcon="false"></nav-bar>
		</view>
		
		<view class="content">
			<cate-list :lists="lists" @click="cateClick"></cate-list>
		</view>
		<!-- 底部导航 -->
		<!-- <view>
			<tab-bar></tab-bar>
		</view> -->
	</view>
</template>

<script>
	/**
	 * DearyCateList 分类列表
	 * @description 用于展示分类列表
	 * @property {Array} lists 列表需要的数据对象
	 * @property {String} leftTitleMap 左侧列表的标题字段
	 * @property {String} rightListMap 右侧列表的字段
	 * @property {String} rightListTitleMap 右侧列表的标题字段
	 * @property {String} rightListImageMap 右侧列表的图片字段
	 * @property {String} imageMode 图片的展示模式
	 * @event {Function} click 点击事件 ，返回当前的事件对象
	 * @example <deary-l-c-list :lists="" left-title-map="title" right-list-map="list" right-list-image-map="image" right-list-title-map="title" image-mode="aspectFill" @click=""></deary-l-c-list>
	 */
	import cateList from '@/components/deary-cate-list/deary-cate-list.vue'
	export default {
		components: {
			cateList,
		},
		data() {
			return {
				// 列表数据 title:标题 shop:展示列表
				lists: [{
					title: "手办",
					list: [{
							title: "内容一",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容二",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容三",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
					],
				}, {
					title: "玩具",
					list: [{
							title: "内容一",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容二",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容三",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
					],
				}, {
					title: "人物",
					list: [{
							title: "内容一",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容二",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容三",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
					],
				}, {
					title: "日常用品",
					list: [{
							title: "内容一",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容二",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容三",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
						{
							title: "内容四",
							image: "https://ask.dcloud.net.cn/uploads/avatar/001/71/93/72_avatar_max.jpg",
						},
					],
				}, ],
			};
		},
		methods: {
			cateClick(item) {
				console.log("当前点击", JSON.stringify(item))
			},
		},
	};
</script>

<style scoped>
	.container {
		height: 100%;
	}
	.content{
		display: flex;
		flex-direction: column;
	}
</style>